<template>
  <div class="wrap">
    <div id="echartContainer" style="height: 350px;"></div>
    <div id="echartContainer3" style="height: 350px;"></div>
  </div>
</template>
<script>
export default {
  name: 'UserDistribution',
  data() {
    return {

    }
  },
  methods: {
    loadingSuccuss() {
      this.$emit('getLoadingFinished',false)
    },
    getUserCityDistributionPecent() {
      let sData = [],
          lData = [],
          oDiv = document.getElementById('echartContainer');
      this.axios.get(this.api.getUserCityDistributionPecent)
      .then( res => {
        if(res.data.status === '1') {
          let _data = res.data.details;
          lData = _data.cityList;
          for(let i = 0; i < _data.numberList.length; i ++) {
            let objItem = {};
            objItem.value = _data.numberList[i];
            objItem.name = _data.cityList[i];
            sData.push(objItem);
          }
        }
        this.drawUserCityDistributionPecentPie('用户占比', oDiv, lData, sData);
        this.loadingSuccuss();
      })
      .catch( res => {
        this.loadingSuccuss();
      })
    },
    getUserSexPecent() {
      let sData = [],
        lData = [],
        oDiv = document.getElementById('echartContainer3');
      this.axios.get(this.api.getUserSexPecent)
      .then( res => {
        if(res.data.status === '1') {
          let _data = res.data.details;
          lData = _data.sexList;
          for(let i = 0; i < _data.numberList.length; i ++) {
            let objItem = {};
            objItem.value = _data.numberList[i];
            objItem.name = _data.sexList[i];
            sData.push(objItem);
          }
        }
        this.drawUserCityDistributionPecentPie('性别', oDiv, lData, sData);
        this.loadingSuccuss();
      })
      .catch( res => {
        this.loadingSuccuss();
      })
    },
    drawUserCityDistributionPecentPie(_title, _oDiv, _lData, _sData) {
      console.dir(_oDiv)
      _oDiv.style.width = window.innerWidth + 'px';
      let myChart = this.$echarts.init(_oDiv);
      let option = {
        backgroundColor: '#fff',
        title: {
          show: true,
          text: _title,
          left: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          itemWidth: 14,
          itemHeight: 14,
          align: 'left',
          top: '40',
          data: _lData,
          textStyle: {
            color: '#000'
          }
        },
        series: [
          {
            name:_title,
            type:'pie',
            hoverAnimation: false,
            legendHoverLink:false,
            radius: ['40%', '42%'],
            color: ['#915872', '#3077b7', '#9a8169', '#3f8797','#5b8144','#307889','#9c6a79'
            ],
            label: {
              normal: {
                position: 'inner'
              }
            },
            labelLine: {
              normal: {
                show: false
              },

            },
            tooltip: {
              show:false,
            }
          },
          {
            name:_title,
            type:'pie',
            radius: ['42%', '55%'],
            // color: ['#d74e67', '#0092ff', '#eba954', '#21b6b9','#60a900','#01949b',' #f17677'],
            label: {
              normal: {
                formatter: '{b}\n{d}%'
              },

            },
            data: _sData
          }
        ]
      };
      // 绘制图表
      myChart.setOption(option)
    }
  },
  mounted() {
    this.getUserCityDistributionPecent();
    this.getUserSexPecent();
  }

}
</script>
<style scoped>

</style>
